<template>
    <div class="ex-detail">
<!--        <div class="em-title">-->
<!--            <p>Newsletter ＆ Exclusive information</p>-->
<!--        </div>-->
<!--        &lt;!&ndash; <Transition name="slide-fade" @after-leave="onAfterLeave"> &ndash;&gt;-->
<!--        <div class="ep-content">-->
<!--            <div class="epc-card">-->
<!--                <div class="epc-left">-->
<!--                    <div class="epc-left-img">-->
<!--                        <img src="/images/neInfo/info.png"/>-->
<!--                    </div>-->
<!--                    <div class="epc-left-name">Subscribe to receive MediaInfos</div>-->
<!--                    <div class="epc-left-position">If you wish to receive our regular update on the topics we feature,-->
<!--                        you can subscribe for our newsletter.-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="epc-right">-->
<!--                    <div class="epc-right-img">-->
<!--                        <img src="/images/neInfo/letter.png"/>-->
<!--                    </div>-->
<!--                    <div class="epc-right-name">Request accreditation</div>-->
<!--                    <div class="epc-right-position">We offer exclusive information for journalists. If you are-->
<!--                        interested, you can request accreditation here.-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
        <div class="em-btn-div">
            <div class="em-more-btn" @click="dialogVisible = true">
                Subscribe and Request accreditation
            </div>
        </div>


        <div class="dialogContent">
            <el-dialog v-model="dialogVisible" :show-close=false :destroy-on-close=true>
                <SRA :close="closeDialog"></SRA>
            </el-dialog>
        </div>
    </div>
</template>
<script setup lang="ts">
    const dialogVisible = ref(false);
    const closeDialog = () => {
        dialogVisible.value = false;
    }
</script>
<style scoped lang="scss">

    .dialogContent {
        :deep(.el-dialog) {
            width: 1024px;
            padding: 0px;
        }

        :deep(.el-dialog__header) {
            display: none;
        }

        :deep(.el-dialog__footer) {
            padding: 10px;
            padding-left: 32px;

        }
    }

    .ex-detail {
        position: relative;
        padding: 0px 0px;
        background: #fff;
        width: 1920px;
        height: 180px;
        padding-top: 100px;

        .em-title {
            // margin-top: 100px;
            font-size: 56px;
            color: #000;
            font-weight: 600;
            // margin-bottom: 112px;
            width: 100%;
            text-align: center;
        }

        .ep-content {
            // width: 1720px;
            // margin-bottom: 10px;
            padding: 80px 160px;

            .epc-card {
                overflow: hidden;
                display: inline-flex;
                height: 280px;

                .epc-left {
                    width: 780px;
                    height: 320px;
                    // padding: 0 160px;
                    /*padding-left: 160px;*/
                    background: rgb(50, 115, 174, 0.08);

                    .epc-left-img {
                        width: 100%;
                        padding-top: 72px;
                        text-align: center;
                        overflow: hidden;

                        img {
                            width: 72px;
                            height: 72px;
                            border: 2px dashed rgba(0, 0, 0, 0.2);
                        }
                    }

                    .epc-left-name {
                        text-align: center;
                        width: 100%;
                        height: 30px;
                        margin-top: 25px;
                        font-size: 24px;
                        font-weight: 700;
                        color: #30363A;
                    }

                    .epc-left-position {
                        text-align: center;
                        width: 100%;
                        height: 30px;
                        margin-top: 20px;
                        font-size: 14px;
                        color: #30363A;
                    }

                }

                .epc-right {
                    width: 780px;
                    height: 320px;
                    background: rgb(81, 150, 141, 0.08);
                    margin-left: 40px;

                    .epc-right-img {
                        width: 100%;
                        padding-top: 72px;
                        text-align: center;
                        overflow: hidden;

                        img {
                            width: 72px;
                            height: 72px;
                            border: 2px dashed rgba(0, 0, 0, 0.2);
                        }
                    }

                    .epc-right-name {
                        text-align: center;
                        width: 100%;
                        height: 30px;
                        margin-top: 25px;
                        font-size: 24px;
                        font-weight: 700;
                        color: #30363A;
                    }

                    .epc-right-position {
                        text-align: center;
                        width: 100%;
                        height: 30px;
                        margin-top: 20px;
                        font-size: 14px;
                        color: #30363A;
                    }
                }

            }

            .epc-card:hover .epc-img img {
                transform: scale(1.05);
            }

        }

        .em-btn-div {
            width: 100%;
            padding-left: 796px;

            .em-more-btn {
                width: 328px;
                height: 60px;
                line-height: 60px;
                /*margin-left: 504px;*/
                text-align: center;
                background: rgb(55, 46, 44, 1);
                border-bottom: 4px solid #3273AE;
                color: #fff;
                cursor: pointer;
                transition: background-color .3s;
                font-size: 16px;
                user-select: none;
            }

            .em-more-btn:hover {
                background-color: rgb(50, 115, 174, 1);
            }
        }


    }

</style>
